<template>
<el-card style="height: 40%;width: 100%">
  <div class="mod-config">
    <!-- 项目经历 -->
    <div class="warp__2BP03">
      <div class="warp__1CDpL">
          <div class="warp_l__34yS8">
          ♊&nbsp;&nbsp;<span class="work__00001">项目经历</span>
        </div>
        <div class="warp_r__1-t6m" v-if="opencom==1">
          <img class="icon_style__xOInT" alt="" src="">
          <span @click="additemcom()">添加</span>
        </div>
      </div>
    </div>
    <div style="width: 150px; height: 50px;"></div>
    <div style="width: 500px; height: 50px;background: #F2F6FC; " v-if="closecom==1&&itemList.length==null">
      <font style="font-size:15px;line-height: 50px;padding-left: 30px">完善项目经历信息，有助于Hr更真实的了解你的能力</font>
      <a @click="additemcom">立即添加</a>
    </div>
    <div style="width: 700px;" v-if="opencom==2">
      <font color="green" style="font-size:15px;line-height: 30px;padding-left: 30px;">添加项目经验</font><font style="font-size:12px;line-height: 30px;padding-left: 20px">请放心填写，将自动为您屏蔽相关公司</font>
      <el-form ref="form" :model="item" label-width="80px" style="padding-left:30px; padding-top:30px">
        <el-form-item label="项目名称">
          <el-input v-model="item.itemName"></el-input>
        </el-form-item>
        <el-form-item label="公司名称">
          <el-select v-model="item.companyName">
            <el-option
              v-for="item in companyOptions"
              :key="item.name"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
          <span style="margin-left: 23px">项目周期</span>
          <el-date-picker
            v-model="item.itemInDate"
            type="month"
            value-format="yyyy-MM-dd"
            placeholder="开始时间"
            style="width: 25%"
            @change="thinkdate(0)">
          </el-date-picker>
          <el-date-picker
            v-model="item.itemOutDate"
            type="month"
            value-format="yyyy-MM-dd"
            placeholder="结束时间"
            style="width: 25%"
            @change="thinkdate(0)">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目类型">
          <el-select
            v-model="item.projectType"
            multiple
            collapse-tags
            style="width: 100%"
            placeholder="请选择项目类型">
            <el-option
              v-for="item in projectTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目技术">
          <el-select
            v-model="item.projectTechnology"
            multiple
            collapse-tags
            style="width: 100%"
            placeholder="请选择项目技术">
            <el-option
              v-for="item in projectTechnologyOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目环境">
          <el-select
            v-model="item.projectEnvironment"
            multiple
            collapse-tags
            style="width: 100%"
            placeholder="请选择项目环境">
            <el-option
              v-for="item in projectEnvironmentOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目链接">
          <el-input v-model="item.itemUrl" placeholder="请填写项目链接（选填）"></el-input>
        </el-form-item>
          <el-form-item label="项目描述">
            <el-input type="textarea" v-model="item.itemDesc"></el-input>
            <!-- <div class="mod-demo-ueditor">
            <script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">hello world!</script>
            </div> -->
          </el-form-item>
          <el-form-item label="你的成就">
            <el-input type="textarea" v-model="item.achievement"></el-input>
            <!-- <div class="mod-demo-ueditor">
            <script :id="ueId2" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">hello world!</script>
            </div> -->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="additem">完成</el-button>
            <el-button @click="opencom=1,closecom=1">取消</el-button>
          </el-form-item>
        </el-form>
    </div>
    <!-- 修改 -->
    <div style="width: 700px;" v-if="updateopencom==2">
      <font color="green" style="font-size:15px;line-height: 30px;padding-left: 30px;">添加项目经验</font><font style="font-size:12px;line-height: 30px;padding-left: 20px">请放心填写，将自动为您屏蔽相关公司</font>
      <el-form ref="form" :model="updateitem" label-width="80px" style="padding-left:30px; padding-top:30px">
        <el-form-item label="项目名称">
          <el-input v-model="updateitem.itemName"></el-input>
        </el-form-item>
        <el-form-item label="公司名称">
          <el-select v-model="updateitem.companyName">
            <el-option
              v-for="item in companyOptions"
              :key="item.name"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
          <span style="margin-left: 23px">项目周期</span>
          <el-date-picker
            v-model="updateitem.itemInDate"
            type="month"
            value-format="yyyy-MM-dd"
            placeholder="开始时间"
            style="width: 25%"
            @change="thinkdate(1)">
          </el-date-picker>
          <el-date-picker
            v-model="updateitem.itemOutDate"
            type="month"
            value-format="yyyy-MM-dd"
            placeholder="结束时间"
            style="width: 25%"
            @change="thinkdate(1)">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目类型">
          <el-select
            v-model="updateitem.projectType"
            multiple
            collapse-tags
            style="width: 100%"
            placeholder="请选择项目类型">
            <el-option
              v-for="item in projectTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目技术">
          <el-select
            v-model="updateitem.projectTechnology"
            multiple
            collapse-tags
            style="width: 100%"
            placeholder="请选择项目技术">
            <el-option
              v-for="item in projectTechnologyOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目环境">
          <el-select
            v-model="updateitem.projectEnvironment"
            multiple
            collapse-tags
            style="width: 100%"
            placeholder="请选择项目环境">
            <el-option
              v-for="item in projectEnvironmentOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目链接">
          <el-input v-model="updateitem.itemUrl" placeholder="请填写项目链接（选填）"></el-input>
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input type="textarea" v-model="updateitem.itemDesc"></el-input>
          <!-- <div class="mod-demo-ueditor">
          <script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">hello world!</script>
          </div> -->
        </el-form-item>
        <el-form-item label="你的成就">
          <el-input type="textarea" v-model="updateitem.achievement"></el-input>
          <!-- <div class="mod-demo-ueditor">
          <script :id="ueId2" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">hello world!</script>
          </div> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateitemonsubmit">完成</el-button>
          <el-button @click="updateopencom=1,updateitem={}">取消</el-button>
        </el-form-item>
        </el-form>
    </div>
    <div v-for="(item,index) in itemList" :key="index" v-if="itemList!=null" v-show="item.id!=updateitem.id" @mouseover="enter()" @mouseout="leave()">
      <div style="height:40px">
        <a v-if="seen" style="margin-right: 50px;float: right;">
          <img style="width: 20px; height: 20px" @click="delitem(item.id)" class="icon_d__8fzmg" alt="" src="">
        </a>
        <a v-if="seen" style="margin-right: 50px;float: right;">
          <img style="width: 20px; height: 20px" @click="updateitemcom(item.id)" class="icon_e__36ON5" alt="" src="">
        </a>
        <font style="padding-left:5px">项目名称：{{item.itemName}}</font>
        <font style="padding-left:5px;float: right" v-if="!seen">项目周期：{{editDateTime(item,item.itemInDate)}}至:{{editDateTime(item,item.itemOutDate)}}</font>
      </div>
      <div style="height:40px"><font style="padding-left:5px">项目描述：{{item.itemDesc}}</font></div>
      <div style="height:40px"><font style="padding-left:5px">项目类型：{{dataTranscoding(item.projectType,0)}}</font></div>
      <div style="height:40px"><font style="padding-left:5px">项目技术：{{dataTranscoding(item.projectTechnology,1)}}</font></div>
      <div style="height:40px"><font style="padding-left:5px">项目环境：{{dataTranscoding(item.projectEnvironment,2)}}</font></div>
      <div style="height:40px"><font style="padding-left:5px">成就：{{item.achievement}}</font></div>
      <div style="height:40px;margin-bottom: 30px"><font style="padding-left:5px">项目链接：</font><a color="green">{{item.itemUrl}}</a></div>
    </div>

  </div>
  </el-card>
</template>

<script>
import ueditor from 'ueditor'
import moment from 'moment'
export default {
   inject:['reload'],
  data(){
    return{
      open:1,
      opencom:1,
      closecom:1,
      item:{
        itemName:null,
        companyName:null,
        itemInDate:null,
        itemOutDate:null,
        itemUrl:null,
        itemDesc:null,
        achievement:null,
        resumeId:null,
        projectType:null,
        projectTechnology:null,
        projectEnvironment:null,
      },
      itemList:[],
      updateitem:{},
      updateopencom:1,
      resumeId:null,
      user:{},
      resume:{},
      seen:false,
      companyOptions:[{name:'不关联公司'}],
      projectTypeOptions: [],
      projectTechnologyOptions: [],
      projectEnvironmentOptions: []
    }
  },
  methods:{
    dataTranscoding(val,status){//数据转码
      val = JSON.parse(val);
      let resuleValue = '';
      if (status===0){//项目类型
        for (let i=0;i<val.length;i++){
          for (let j=0;j<this.projectTypeOptions.length;j++){
            if (val[i]===this.projectTypeOptions[j].id){
              resuleValue += this.projectTypeOptions[j].name + "、"
            }
          }
        }
      }
      if (status===1){//项目技术
        for (let i=0;i<val.length;i++){
          for (let j=0;j<this.projectTechnologyOptions.length;j++){
            if (val[i]===this.projectTechnologyOptions[j].id){
              resuleValue += this.projectTechnologyOptions[j].name + "、"
            }
          }
        }
      }
      if (status===2){//项目环境
        for (let i=0;i<val.length;i++){
          for (let j=0;j<this.projectEnvironmentOptions.length;j++){
            if (val[i]===this.projectEnvironmentOptions[j].id){
              resuleValue += this.projectEnvironmentOptions[j].name + "、"
            }
          }
        }
      }
      return resuleValue.substring(0,resuleValue.length-1);
    },
    editDateTime(row,column){//日期格式处理
      const date = column
      if (date === undefined) {
          return ''
      }
      return moment(date).format('YYYY-MM-DD')
    },
    enter(){
      this.seen=true;
    },
    leave(){
      this.seen=false;
    },
    additemcom(){
      if(this.updateopencom==2){
        this.$confirm('离开修改内容将不会保存', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.opencom = 2;
          this.updateopencom=1;
        }).catch(() => {
        });
      }
      this.opencom=2;
      this.closecom=2;
      this.updateitem = {};
    },
    async findByresumeId(){
      //this.user = JSON.parse(localStorage.getItem('user'));
         this.resume= JSON.parse(localStorage.getItem("resume"));
      this.$http({
        url: this.$http.adornUrl(`/resume/itemexperience/findByresumeId/${this.resume.id}`),
        method: 'get',
        data: this.$http.adornData()
      }).then(({data}) => {
        console.log(data);
        if(data.itemList!=''){
          this.itemList = data.itemList;
          this.$emit('resumTest')
        }
      })
      //获取该用户已添加工作经历中的公司
      await this.$http({
        url: this.$http.adornUrl(`/resume/workexperience/list/${this.resume.id}`),
        method: 'get'
      }).then(({data}) => {
        console.log(data);
        if(data!==''){
          for (let i=0;i<data.length;i++){
            this.companyOptions.push({name:data[i].name})
          }
        }
      })
      //获取项目有关的数据
      await this.$http({
        url: this.$http.adornUrl(`/hope/project/type`),
        method: 'get'
      }).then(({data}) => {
        this.projectTypeOptions = data;
      })
      await this.$http({
        url: this.$http.adornUrl(`/hope/project/technology`),
        method: 'get'
      }).then(({data}) => {
        this.projectTechnologyOptions = data;
      })
      await this.$http({
        url: this.$http.adornUrl(`/hope/project/environment`),
        method: 'get'
      }).then(({data}) => {
        this.projectEnvironmentOptions = data;
      })
    },
    additem(){
      this.$http({
        url: this.$http.adornUrl("/resume/itemexperience/save/"),
        method: 'post',
        data: this.$http.adornData({
          'itemName': this.item.itemName,
          'companyName': this.item.companyName,
          'itemInDate': this.item.itemInDate,
          'itemOutDate': this.item.itemOutDate,
          'itemUrl': this.item.itemUrl,
          'itemDesc': this.item.itemDesc,
          'achievement': this.item.achievement,
          'resumeId': this.resume.id,
          'projectType': JSON.stringify(this.item.projectType),
          'projectTechnology': JSON.stringify(this.item.projectTechnology),
          'projectEnvironment': JSON.stringify(this.item.projectEnvironment)
        })
      }).then(({data}) => {
        this.opencom = 1;
        this.updateitem = {}
        this.item={
          itemName:null,
            companyName:null,
            itemInDate:null,
            itemOutDate:null,
            itemUrl:null,
            itemDesc:null,
            achievement:null,
            resumeId:null,
            projectType:null,
            projectTechnology:null,
            projectEnvironment:null,
        }
        this.findByresumeId();
      })
    },
    updateitemcom(id){
      if(this.opencom===2){
        this.$confirm('离开修改内容将不会保存', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.opencom = 1;
          this.updateopencom=2;
        }).catch(() => {
        });
      }
      this.$http({
        url: this.$http.adornUrl(`/resume/itemexperience/info/${id}`),
        method: 'get',
        data: this.$http.adornData()
      }).then(({data}) => {
        this.updateitem = data.itemExperience;
        this.updateitem.projectType = JSON.parse(this.updateitem.projectType)
        this.updateitem.projectTechnology = JSON.parse(this.updateitem.projectTechnology)
        this.updateitem.projectEnvironment = JSON.parse(this.updateitem.projectEnvironment)
      })
      this.updateopencom =2;
    },
    updateitemonsubmit(){
      this.$http({
        url: this.$http.adornUrl("/resume/itemexperience/update/"),
        method: 'post',
        data: this.$http.adornData({
          'id': this.updateitem.id,
          'itemName': this.updateitem.itemName,
          'companyName': this.updateitem.companyName,
          'itemInDate': this.updateitem.itemInDate,
          'itemOutDate': this.updateitem.itemOutDate,
          'itemUrl': this.updateitem.itemUrl,
          'itemDesc': this.updateitem.itemDesc,
          'achievement': this.updateitem.achievement,
          'resumeId': this.resume.id,
        })
      }).then(({data}) => {
        this.updateitem = {}
        this.item={
          itemName:null,
          companyName:null,
          itemInDate:null,
          itemOutDate:null,
          itemUrl:null,
          itemDesc:null,
          achievement:null,
          resumeId:null,
          projectType:null,
          projectTechnology:null,
          projectEnvironment:null,
        }
        this.findByresumeId();
        this.updateopencom = 1;
      })
    },
    delitem(id){
      this.$http({
        url: this.$http.adornUrl(`/resume/itemexperience/deleteById/${id}`),
        method: 'get',
        data: this.$http.adornData()
      }).then(({data}) => {
      })
      this.reload();
    },
    thinkdate(status){
      if (status===1){
        let itemInDate = new Date(this.updateitem.itemInDate).getTime()
        let itemOutDate = new Date(this.updateitem.itemOutDate).getTime()
        if(itemInDate>=itemOutDate){
          alert("请正确填写");
          this.updateitem.itemOutDate = null;
        }
      }
      if (status===0){
        let itemInDate = new Date(this.item.itemInDate).getTime()
        let itemOutDate = new Date(this.item.itemOutDate).getTime()
        if(itemInDate>=itemOutDate){
          alert("请正确填写");
          this.item.itemOutDate = null;
        }
      }
    }
  },
  mounted(){
    this.findByresumeId();
  }
}
</script>




<style lang="scss">
  .mod-demo-ueditor {
    position: relative;
    z-index: 510;
    > .el-alert {
      margin-bottom: 10px;
    }
  }
  .mod-home {
    line-height: 1.5;
  }
  .warp__1CDpL .warp_r__1-t6m .icon_style__xOInT {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: middle;
  }

  .warp__1CDpL .warp_l__34yS8 {
    float: left;
  }

  .warp__1CDpL .warp_r__1-t6m {
    margin-right: 50px;
    float: right;
    font-size: 14px;
    font-weight: 400;
    color: #02B28A;
    line-height: 28px;
    cursor: pointer;
  }

  .a1{
    border-left: 3px solid #00B38A;
    height: 16px;
    position: absolute;
    top: 24px;
    left: 30px;
  }

  .work__00001{
    font-size: 20px;
    font-weight: 600;
    color: #040404;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

